<template>
    <div class="pay-container">
      <!-- 生成微信支付二维码 -->
      <div class="erwei">
        <img :src="payUrl" alt="" />
      </div>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-wechat_pay"></use>
      </svg>
      <span>使用微信进行支付</span>
      <el-descriptions title="订单详情">
        <el-descriptions-item label="订单号"></el-descriptions-item>
        <el-descriptions-item label="创建时间"></el-descriptions-item>
        <el-descriptions-item label="产品名称"></el-descriptions-item>
        <el-descriptions-item label="商品描述"></el-descriptions-item>
        <el-descriptions-item label="购买数量"></el-descriptions-item>
        <el-descriptions-item label="购买用户"></el-descriptions-item>
        <el-descriptions-item label="手机号"></el-descriptions-item>
        <el-descriptions-item label="总价格"></el-descriptions-item>
      </el-descriptions>
    </div>
  </template>
    <script>
  //首先要获取订单id
  import { mapState } from "vuex";
  //引入生成二维码插件
  import qrCode from "qrcode";
  //引入获取订单和支付的方法
  import * as api from "@/api/transaction";
  export default {
    data() {
      return {
        order_id: "", //订单号
        //请求的订单详情
        orderDetail: {
          //数据初始化
          orderDetail: [
            {
              productName: "",
              description: "",
              quantity: "",
            },
          ],
        },
        payUrlRes: {}, //请求获取的支付结果
        payUrl: "", //支付地址
      };
    },
    computed: {},
    created() {
      let { order_id } = this.$route.query;
      this.order_id = order_id;
      //3.如果用户刷新了当前页面,本次交易取消,我们需要让用户重新提交交易
      if (!this.order_id) {
        //没有订单id 有可能用户刷新了页面
        //提示:本次交易取消,返回到预支付页面
        this.$alert("本次交易取消,请重新提交", "提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$router.push({ path: "/home/preorder" });
          },
        });
  
        return;
      }
      //1.根据订单id 请求订单详情
      //2.根据订单id 获取微信支付地址,=>我们获取地址之后,生成二维码0
  
      //并发请求 一次发送多个请求 Promise.all([promise1,promise2])
  
      Promise.all([
        api.getOrderDetail(this.order_id),
        api.pay(this.order_id),
      ]).then((res) => {
      //   console.log(res);
        this.orderDetail = res[0].data.data;
        let paymentRes = res[1].data;
        if (paymentRes.state) {
          //获取支付地址
          let payUrl = paymentRes.code_url;
  
          //生成二维码
  
          qrCode.toDataURL(payUrl, (err, img) => {
          //   console.log(img);
            this.payUrl = img;
          });
        }
      });
  
      //轮询 查询支付状态
      //轮询的时候,一定要设置时间
      //设置200ms
  
      this.queryPayStatusInterval = setInterval(() => {
        api.queryPayStatus(this.order_id).then((res) => {
          // console.log(res);
          if (res.data.state) {
            //跳转到支付成功这个页面
            this.$router.push({ path: "/payment/paysuccess" });
          }
          // else {
          // 	this.$router.push({ path: "/vipmanager/charge" })
          // }
        });
      }, 2000);
    },
    beforeDestroy() {
      //组件即将销毁的时候
      //清除定时器
      clearInterval(this.queryPayStatusInterval);
    },
  };
  </script>